@CHARSET "UTF-8";

.cafe-timeline{
    position: absolute;
    cursor: default;
    width: 100%;
    bottom: 0px;
}
.cafe-tl-hidebtn{
    position: absolute;
    right: 10px;
    color: #868ca6;
    cursor: pointer;
    height: 28px;
    display: none;
}
.cafe-tl-hidebtn>.cafe-ifont{
    position: relative;
    height: 100%;
    line-height: 33px;
    font-size: 15px;
}
.cafe-tl-alarm-icons{
    position: relative;
    z-index: 4;
    bottom: 54px;
    left: 0;
    width: 100%;
    display: none;
}
.cafe-tl-alarm{
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 100%;
    height: 54px;
}
.cafe-tl-alarm>div{
	margin-left: 1px;
}
.cafe-tl-alarm-icon{
	float:left;
	width: 40px;
	min-height: 1px;
	margin-left: 1px;
}
.cafe-tl-alarm-icon.sk>span{
	background-color: rgba(255,255,255,0.3)!important;
}
.cafe-tl-alarm-icon.sk>span.active{
	border:2px solid #5591e6;
	background-color: rgb(255,255,255)!important;
}
.cafe-tl-alarm-icon>span{
	float:left;
	cursor:pointer;
	width: 29px;
	height: 25px;
	margin: 2px 5px;
}
.cafe-tl-alarm-icon.sk>span>i{
	width: 100%;
	height: 100%;
    margin: 0;
	box-shadow: none;
}
.cafe-tl-alarm-icon.sk>span.active>i{
	border:none;
}
.cafe-tl-alarm-icon>span>i{
	float: left;
	width: 19px;
	height: 19px;
    margin: 3px 5px;
    box-shadow: 0px 0px 0px 1px #fff inset;
}
.cafe-tl-alarm-icon>span.active>i{
	border:2px solid #5591e6;
}
.cafe-tl-alarm-icon>span.s_rain1-0>i{
	background: url("warningLegend/img/rain1h_red.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_rain3-0>i{
	background: url("warningLegend/img/rain3h_red.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_rain6-0>i{
	background: url("warningLegend/img/rain6h_red.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_storm-0>i{
	background: url("warningLegend/img/hsf_blue.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_v-0>i{
	background: url("warningLegend/img/vis-icon-red.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_v-1>i{
	background: url("warningLegend/img/vis-icon-orange.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_v-2>i{
	background: url("warningLegend/img/vis-icon-yellow.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_v-3>i{
	background: url("warningLegend/img/vis-icon-blue.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_h_t-0>i{
	background: url("warningLegend/img/temp-icon-red.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_h_t-1>i{
	background: url("warningLegend/img/temp-icon-orange.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_h_t-2>i{
	background: url("warningLegend/img/temp-icon-yellow.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_h_t-3>i{
	background: url("warningLegend/img/temp-icon-blue.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_hail-0>i{
	background: url("warningLegend/img/legend-icon-hail.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_meso-0>i{
	background: url("warningLegend/img/legend-icon-meso.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_light-0>i{
	background: url("warningLegend/img/legend-icon-light.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_rada-0>i{
	background: url("warningLegend/img/legend-icon-huibo.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_titan-0>i{
	background: url("warningLegend/img/legend-icon-titan.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_tornado-0>i{
	background: url("warningLegend/img/legend-icon-tornado.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_storm-0>i{
	background: url("warningLegend/img/legend-icon-storm.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_vil-0>i{
	background: url("warningLegend/img/legend-icon-vil.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_liquid-0>i{
	background: url("warningLegend/img/legend-icon-yts.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_l_gal-0>i{
	background: url("warningLegend/img/ldf_blue.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.s_s_gal-0>i{
	background: url("warningLegend/img/hsf_blue.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.k_tp10min-0>i{
	background: url("warningLegend/img/legend-icon-10Mrain.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.k_tp1h-0>i{
	background: url("warningLegend/img/legend-icon-1Hrain.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.k_tp3h-0>i{
	background: url("warningLegend/img/legend-icon-3Hrain.png") no-repeat center;
}
.cafe-tl-alarm-icon>span.k_tp6h-0>i{
	background: url("warningLegend/img/legend-icon-6Hrain.png") no-repeat center;
}

.cafe-tl-a-sk{
    /* background-color: rgba(39,174,144,0.3); */
}
.cafe-tl-a-lj{
	/* background-color: rgba(174,122,39,0.3); */
}
.cafe-tl-a-dl{
	/* background-color: rgba(174,74,39,0.3); */
}
div.cafe-tl-a-fill{
    position: absolute;
    right: 0;
    width: 61px;
	margin-left: 0;
}
.cafe-tl-a-fill.sk{
    /* background-color: rgba(39,174,144,0.3); */
}
.cafe-tl-a-fill.lj{
    /* background-color: rgba(174,122,39,0.3); */
}
.cafe-tl-a-fill.dl{
   /*  background-color: rgba(174,74,39,0.3); */
}
.cafe-tl-alarm-icon:first-child,
.cafe-tl-alarm>div:first-child,
.cafe-tl-item:first-child{
	margin-left: 0;
}
.cafe-tl-tip{
	position: absolute;
    z-index: 3;
    width: 100%;
    bottom: 40px;
}
.cafe-tl-tip.style1{
    top: 0;
}
.cafe-tl-smooth,
.cafe-tl-smooth>div,
.cafe-tl-timecontrol,
.cafe-tl-timecontrol>span,
.cafe-tl-a-fill,
.cafe-tl-scroll,
.cafe-tl-content>div,
.cafe-tl-content>i,
.cafe-tl-timelr{
	float: left;
    height: 100%;
}
div.cafe-tl-timecontrol {
    float: right;
}
.cafe-tl-t-sk{
	color: #49d6b7;
	line-height: 13px;
    font-size: 12px;
    text-align: center;
}
.cafe-tl-t-lj{
	color: #e6c569;
	line-height: 13px;
    font-size: 12px;
    text-align: center;
}
.cafe-tl-t-dl{
	color: #ed707e;
	line-height: 13px;
    font-size: 12px;
    text-align: center;
}
.cafe-tl-time{
	position: absolute;
    z-index: 2;
    bottom: 0px;
    height: 54px;
    width: 100%;
    background-color: rgba(29, 139, 228, 0.9);
}
.cafe-tl-time.style1{
    top: 0;
}
i.cafe-tl-item{
    width: 40px;
    height: 26px;
    color: #fff;
    cursor: pointer;
    line-height: 24px;
	height: 28px;
    text-align: center;
    margin-top: 15px;
    position:relative;
    font-size: 12px;
    background-color: #2470d9;
    margin-left: 1px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
}
i.cafe-tl-item:before{
    content: attr(dateTip);
    position: absolute;
    top: -15px;
    left: 0;
    width: 80px;
    height: 15px;
    line-height: 15px;
    text-align: left;
    color: #9393a8;
}
i.cafe-tl-item.alarm:after{
	content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 10px solid red;
    border-left: 10px solid transparent;
}
i.cafe-tl-item.active{
	background-color: #fb8811;
}
i.cafe-tl-item.tl-sk{
	border-bottom-color: #3aac97;
}
i.cafe-tl-item.tl-lj{
	border-bottom-color: #c2af4a;
}
i.cafe-tl-item.tl-dl{
	border-bottom-color: #cd666a;
}
.cafe-tl-scroll{
	width:100%;
	overflow: hidden;
	overflow-x: auto;
    margin-left: 25px;
}
@media screen and (min-width: 1920px) {
	.cafe-tl-scroll{
		overflow: hidden;
	}
}
.cafe-tl-content{
	position: absolute;
	height:100%;
}
.cafe-tl-timelr{
	position: absolute;
    right: 0;
    width: 59px;
    top: 28px;
    height: 26px;
    display: flex;
    color: #868ca6;
    font-weight: bold;
}
.cafe-tl-timelr>.cafe-ifont{
    flex: 1;
    cursor:pointer;
	position: relative;
    height: 100%;
    line-height: 13px;
    text-align: center;
    font-size: 12px;
}
.cafe-tl-timelr>.cafe-ifont:hover{
    color: #fff;
}
.cafe-tl-duration{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 14px;
	cursor:pointer;
	background: url("images/cafe-timeline2/cafe-tl-sts-tselect-icon.png") no-repeat center;
}
.cafe-tl-duration.active{
	background: url("images/cafe-timeline2/cafe-tl-sts-tselect2-icon.png") no-repeat center;
}
.cafe-tl-lock{
    position: absolute;
    top: 2px;
    right: 30px;
    width: 24px;
    height: 22px;
    border-radius: 2px;
    cursor: pointer;
    display: none;
}
.cafe-tl-lock>i{
	float: left;
    width: 100%;
    height: 100%;
	background: url("images/cafe-timeline2/timeline-lock-icon.png") no-repeat center;
}
.cafe-tl-lock.active>i{
	float: left;
    width: 100%;
    height: 100%;
	background: url("images/cafe-timeline2/timeline-unlock2.png") no-repeat center;
	/* background-color: #5591e6;
    border-radius: 2px; */
}
.cafe-tl-timecontrol.style2{
    width: 74px;
    padding-left: 10px;
}
.cafe-tl-timecontrol.smooth{
    width: 115px;
    padding-left: 0;
}
.cafe-tl-timecontrol>span{
    width: 25px;
    height: 28px;
    line-height: 28px;
    margin-top: 13px;
    cursor: pointer;
    margin-right: 2px;
}
.cafe-tl-timecontrol.smooth>span {
	margin-top: 18px;
}
.cafe-tl-left-icon{
	background: url("images/cafe-timeline2/timeline-left.png") no-repeat center;
}
.cafe-tl-play-icon{
	background: url("images/cafe-timeline2/timeline-play.png") no-repeat center;
}
.cafe-tl-play-icon.active{
	position: relative;
	color: #868ca6;
	background: none;
	line-height: 21px;
	background: url("images/cafe-timeline2/timeline-suspend.png") no-repeat center;
}
.cafe-tl-right-icon{
	background: url("images/cafe-timeline2/timeline-right.png") no-repeat center;
}
.cafe-tl-speed{
	color: #bdc1d0;
    text-align: center;
}
.cafe-tl-speed>i{
	color: #fff;
    padding: 2px 5px;
    border-radius: 2px;
    background-color: #357fb9;
}
.cafe-tl-speed.active>i{
	color:#fff;
    background-color: #5591e6;
}
.cafe-tl-refresh-icon{
	background: url("images/cafe-timeline2/timeline-refresh.png") no-repeat center;
}
.cafe-tl-refresh-icon.active{
	height: 28px;
    margin-top: 18x;
    border-radius: 2px;
	background: url("images/cafe-timeline2/timeline-refresh2.png") no-repeat center;
}
.cafe-tl-thumbnail-icon{
	background: url("images/cafe-timeline2/timeline-thumbnail.png") no-repeat center;
}
.cafe-tl-thumbnail-icon.active{
	height: 25px;
    margin-top: 27px;
    border-radius: 2px;
	background: url("images/cafe-timeline2/timeline-thumbnail2.png") no-repeat center;
	background-color: #5591e6;
}
.cafe-tl-thumbnail{
	display:none;
    position: absolute;
    z-index: 10000000;
    left: 0;
    bottom: 2px;
    height: 190px;
    width: 100%;
}
.cafe-tl-tab{
	position: absolute;
    z-index: 1;
	width: 100%;
    height: 30px;
    line-height: 30px;
    margin: 0;
    color: rgba(255,255,255,0.7);
    background-color: rgba(135,161,238,0.3);
}
.cafe-tl-t-item{
    float: left;
    height: 100%;
    width: 100px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.cafe-tl-t-item.active{
    color: #fff;
    background: -webkit-linear-gradient(top, #6a99ef, #5388ec);
}
.cafe-tl-tab-content{
    position: absolute;
    top: 0;
	width: 100%;
    height: 100%;
    padding-top: 30px;
    background-color: rgba(88,90,111,0.93);
}
.cafe-tl-t-c-left,
.cafe-tl-t-c-right{
    position: relative;
    height: 100%;
    width: 49px;
}
.cafe-tl-t-c-left>i,
.cafe-tl-t-c-right>i{
	font-size: 40px;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 160px;
    color: #9294a1;
    cursor: pointer;
}
.cafe-tl-t-c-left>i:hover,
.cafe-tl-t-c-right>i:hover{
    color: #fff;
}
.cafe-tl-t-c-left{
	float: left;
}
.cafe-tl-t-c-right{
	float: right;
}
.cafe-tl-thumbnail .cafe-ic-iconfontcha{
	z-index: 2;
    margin: 0;
    left: initial;
    bottom: initial;
    top: 5px;
    right: 10px;
    color: #c0c3cf;
    cursor: pointer;
}
.cafe-tl-t-c-scroll{
    float: left;
    height: 100%;
    width: 1798px;
    overflow: hidden;
}
.cafe-tl-t-c-nodata{
    float: left;
    width: 100%;
    line-height: 160px;
    text-align: center;
    font-size: 18px;
    color: rgba(255,255,255,0.7);
}
.cafe-tl-t-c-scontent{
	height: 100%;
	float: right;
}
.cafe-tl-t-c-sc-item{
	float: left;
    width: 182px;
    height: 150px;
    margin-top: 5px;
    padding: 0 5px;
    cursor: pointer;
    color: rgba(255,255,255,0.7);
    border: 1px solid transparent;
}
.cafe-tl-t-c-sc-item.active{
	color: #fff!important;
    background-color: rgb(85,145,230)!important;
}
.cafe-tl-t-c-sc-item:hover{
	background-color: rgba(207,221,237,0.15);
    border-color: #a3adbe;
}
.cafe-tl-t-c-sc-item .cafe-ic-iconfontcha{
    transform: rotate(45deg);
    right: 0;
    top: 0;
}
.cafe-tl-t-c-sc-title{
    float: left;
    position: relative;
    width: 100%;
    height: 24px;
    line-height: 24px;
}
.cafe-tl-t-c-sc-area{
	float: left;
	position: relative;
    width: 153px;
    height: 120px;
    background: #fff;
}
.cafe-tl-t-c-sc-area>img{
	position: absolute;
	width: 146px;
    height: 115px;
    top: 1px;
    right: 1px;
}
.cafe-tl-t-c-sc-area>img.latlon-layers{
	width: 99%;
	height: 99%;
	top: 1px;
	left: 1px;
}
.cafe-tl-t-c-sc-area>img.cafe-tl-t-c-sc-nodata{
	z-index: 6;
	background: url("images/cafe-timeline2/noData.png") no-repeat center;
}
.cafe-tl-t-c-sc-legend{
	float: left;
    width: 17px;
    height: 120px;
    padding: 6px 0 13px;
    background-color: #fff;
}
.cafe-tl-t-c-sc-legend>img{
    width: 100%;
    height: 100%;
}
.cafe-tl-smooth{
	display: none;
}
.cafe-tl-sts{
	width: 80px;
}
.cafe-tl-sts-tselect{
	height: 14px;
    background-color: rgba(37,38,58,0.55);
}
.cafe-tl-sts-tlabel{
	height: 40px;
    background-color: #116eb7;
}
.cafe-tl-sts-tl-icon{
	float: left;
    width: 30px;
    height: 100%;
    display: none;
    background: url(images/cafe-timeline2/cafe-tl-sts-tl-icon.png) no-repeat center;
}
.cafe-tl-sts-tl-name{
    float: left;
    width: 80px;
    height: 100%;
    line-height: 40px;
    color: #fff;
    text-align: center;
    font-size: 15px;
}
.cafe-tl-sta-timearea{
    margin: 0 24px;
    height: 34px;
    position: relative;
}
.cafe-tl-sta-t-tip{
	position: absolute;
    top: 6px;
    left: -64px;
    right:-2px;
	z-index: 3;
	width: 70px;
	height: 30px;
    color: #fff;
    text-align: center;
	background: url("images/cafe-timeline2/cafe-tl-sta-t-tip.png") no-repeat;
}
.cafe-tl-sta-t-tip.first{
    transform: rotateY(180deg);
    left: -2px;
}
.cafe-tl-sta-t-slider{
	position: absolute;
	z-index: 4;
	left:-12px;
	right:-12px;
    bottom: -9px;
    width: 24px;
    height: 24px;
    cursor: pointer;
	background: url("images/cafe-timeline2/cafe-tl-sta-t-slider.png") no-repeat;
}
.cafe-tl-sta-t-bg,
.cafe-tl-sta-t-defbg{
	position: absolute;
    bottom: 0;
    height: 4px;
    background-color: #1170bb;
}
.cafe-tl-sta-t-bg{
	z-index: 2;
    /* width: 100%; */
    /* right: 0; */
    background: -webkit-linear-gradient(top, rgb(83,161,251), rgb(101,176,252));
}
.cafe-tl-sta-t-defbg{
	position: absolute;
	z-index: 1;
    width: 100%;
    background: #166aab;
}
.cafe-tl-sta-timelabel{
    min-height: 1px;
}
.cafe-tl-sta-timelabel span{
	position: relative;
    float: left;
    width: 32px;
    color: #fff;
    text-align: center;
    color: #fff;
}
.cafe-tl-sta-timelabel span:first-child{
    margin-left: 9px;
}
.cafe-tl-sta-timelabel span:before{
	content:"";
	position:absolute;
	top:0;
    left: 15px;
	width:1px;
	height:6px;
	background-color: rgb(162,162,177);
}
.cafe-tl-d-container{
	position: absolute;
    z-index: 10000001;
    left: 0;
    bottom: 8px;
    width: 80px;
    height: 101px;
}
.cafe-tl-d-line{
	height: 31px;
    line-height: 31px;
    display: flex;
    border-top: 1px solid #3f4157;
    background-color: rgba(63,65,87,0.9);
}
.cafe-tl-d-line:first-child{
    border-top-width: 0;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
.cafe-tl-d-line:nth-child(3){
	border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}
.cafe-tl-d-line>span{
	flex: 1;
    cursor: pointer;
    text-align: center;
    color: rgb(162,162,177);
}
.cafe-tl-d-line>span:hover,
.cafe-tl-d-line>span.active{
    color: #fff;
    background-color: #5591e6;
}
.cafe-tl-d-sanjiao{
	width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(63,65,87,0.9);
    margin: 0 auto;
}